<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script>
			
			window.addEventListener('load', function() {
				checkOfflineWebApps();
			});
			
			function checkOfflineWebApps() {
				
				var enumCacheState = {
					 '0' : 'UNCACHED'
					,'1' : 'IDLE'
					,'2' : 'CHECKING'
					,'3' : 'DOWNLOADING'
					,'4' : 'UPDATEREADY'
					,'5' : 'OBSOLETE'
					};
					
				if (window.applicationCache){
					_('_ApplicationCacheSupport').html('Supported');
					_('_ApplicationCacheStatus').html(
						enumCacheState[window.applicationCache.status]
						);
				} else {
					_('_ApplicationCacheStatus').html('Not Supperted');
				}
			}
			
			// Lightweight Javascript Template Engine
			
			function _(className) {
				this.html = function(innerHTML) {
					var classes = document.getElementsByClassName(className);
					for (var i = 0; i < classes.length; i++){
						classes[i].innerHTML = innerHTML;
					}
				}
				return this;
			}
		</script>
		<style>
			td {
				padding: 4px 8px;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td>Application Support</td>
				<td><span class="_ApplicationCacheSupport"></span></td>
			</tr>
			<tr>
				<td>Application Cache Status</td>
				<td><span class="_ApplicationCacheStatus"></span></td>
			</tr>
		</table>
	</body>
</html>
